<template>
	<div>
		<ul class="holdCityList ">
			<li class="holdCityLi" @click="handleChangeCity(item.name)" v-for="item of list"  :key="item.id">{{item.name}}</li>
		</ul>
	</div>
</template>
<script>
 	import { mapActions } from 'vuex'
	export default{
		name:'cityList',
		props:['list'],
		data(){
			return {
				HoldList:""
			}
		},
		methods:{
			handleChangeCity(city){
				// this.$store.dispatch('changeCity',city)
				this.changeCity(city)
				this.$router.push('/')
			},
			...mapActions(['changeCity'])
		}
	}
</script>
<style lang="stylus" scoped>
	@import '../../../assets/styles/varibles.styl'
	.holdCityList
		&:before
			position:absolute
			height:100%
			content:""
			left:33.3%
			border-right:1px solid #ddd
			border-left:1px solid #ddd
		&:after
			position:absolute
			height:100%
			content:""
			right:33.3%
			border-left:1px solid #ddd
			border-right:1px solid #ddd
	.holdCityList
		position:relative
		overflow:hidden
		background:#fff
		.holdCityLi
			width:33.3%
			float:left
			height:0.9rem
			line-height:0.9rem
			text-align:center
			border-bottom:1px solid #ddd
			display:block
			overflow:hidden
			text-overflow:ellipsis
			white-space:nowrap
			font-size:0.28rem
</style>